<template>
    <div class="table_detail">
        <el-page-header @back="goBack">
            <template #content>
                <span class="text-large font-600 mr-3"> {{ state.data.name }} </span>
            </template>
              <template #extra>
        <div class="flex items-center">
            <el-button type="primary" @click="toEdit" v-permission="'enact:table:edit'">编辑</el-button>
          <el-button type="success" @click="toUpgrade" v-permission="'enact:table:upgrade'">升级</el-button>
        </div>
      </template>
        </el-page-header>
        <el-divider content-position="left" style="margin-top:40px;">报表字段</el-divider>
        <el-table :data="state.data.columns" style="width: 100%" border>
            <el-table-column prop="name" label="字段名称"  align="center" width="250" />
            <el-table-column prop="fieldType.des" label="字段类型" width="200" align="center" />
            <el-table-column prop="sort" label="序号" align="center" width="150" />
            <el-table-column prop="required" label="是否必填" align="center" width="150" >
                <template #default="scope">
                    {{ scope.row.required ? '是' : '否' }}
                </template>
            </el-table-column>
            <el-table-column prop="len" label="长度" align="center" width="150" />
            <el-table-column prop="accuracy" label="小数位" align="center" width="150" />
            <el-table-column prop="version" label="版本" align="center" width="150" />
        </el-table>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue"
import { useRouter, useRoute } from 'vue-router'
import { detail } from '@/api/enact/table'

const router = useRouter()
const route = useRoute()

const id = route.params.id
const state = reactive({
    data: {

    }
})

const goBack = () => {
    router.push("/table-list")
}

const toEdit = () => {
    router.push("/table-edit/" + id)
}
const toUpgrade = () => {
    router.push("/table-upgrade/" + id)
}

const getData = () => {
    detail(id).then(data => {
        state.data = data
    })
}


onMounted(() => {
    getData()
})


</script>
<style scoped lang="scss">
.table_detail {
    height: 100%;
}
</style>
